<html>
    <head>
        <style>
            body{
                display: flex;
                flex-direction: column;
            }
            .main{
                width: 800px;
                height: 150px;
                display: flex;
                /** 设置主轴 
                默认主轴是row，元素跟着主轴排列
                row:从左到右 1234
                row-reverse:从右往左  4321
                column：从上到下 1234
                column-reverse:从下到上 4321
                */
                /* flex-direction: row; */
                /** 
                设置主轴子元素方向 
                flex-start 默认从头开始，主轴是row从左到右 1234
                flex-end 主轴从右到左 1234
                center 主轴居中
                space-around 平分剩余空间
                space-between 先两边贴边，再分配剩余空间（重要）
                */
                /* justify-content:center; */
                /**
                设置子元素 超出长度是否换行
                默认是不换行,如果装不开会缩放子元素宽度，放在父元素里面
                nowrap 默认不换行
                wrap 换行  
                */
                /* flex-wrap:wrap; */
                /**
                设置侧轴上子元素排列方式（单行）,设置换行属性是没有效果的
                flex-start 默认从头开始，侧轴是从左到右 1234
                flex-end 侧轴从右到左 1234
                center 侧轴居中 
                stretch 拉伸，不能指定子元素高度
                */
                /* align-items: center; */
                /**
                设置侧轴子元素的排列方式（多行），配合换行wrap使用
                flex-start 默认从头开始，侧轴是row从左到右 1234
                flex-end 侧轴从右到左 1234
                center 侧轴居中
                space-around 平分剩余空间
                space-between 先两边贴边，再分配剩余空间（重要）
                stretch 拉伸，不能指定子元素高度
                */
                /* align-content: space-between; */

                /**
                flex-direction和flex-wrap属性的复合属性
                设置主轴方向和是否换行
                */
                /* flex-flow: row wrap ; */

            }


            
          


            .main span{
                background: red;
                width: 200px;
                height: 180px;
                margin: 10px;
               
            
            }

            /**
            nth-child设置第几个元素
            */
            .main div:nth-child(1){
                width: 100px;
                height: 150px;
                background: red;
            }
            .main div:nth-child(2){
                flex:1;
                background: gold;
            } 
            .main div:nth-child(3){
                width: 100px;
                height: 150px;
                background: red;
            }

            .flex-d5{
                width: 600px;
                height: 200px;
                display: flex;
                background: #eeeeee;
            }
            .flex-d5 div{
                 /**
                flex：子项目分析配剩余空间，用flex来表示占多少份数
                number 默认0 
                */
                flex:1; 
            }
            .flex-d5 div:nth-child(3){ 
                  /**
            align-self 控制子项自己在侧轴上的排列方式
            默认值auto,表示继承父元素align-items属性，
            如果没有父元素，则等同于stretch
            */
            /**
            order 属性定义项目排列顺序
            数值越小，排列越靠前，默认为0
            */ 
                align-self: flex-end;
                order: -1;
            }

        </style>
    </head>
    <body>
        <section class="main">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <!-- <div>4</div>
            <div>5</div> -->
        </section>

        <div class="flex-d5">
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
        </div>

    </body>
</html>